<div class="flex flex-col history-body">
  <div class="flex items-center justify-between h-10 py-2 mx-2 history-title">
    <span class="font-bold" i18n>History</span>
    <div class="flex items-center justify-center cursor-pointer shrink-0 h-7" i18-nzTooltipTitle
      nzTooltipTitle="Clear All" nz-tooltip nz-popconfirm i18n-nzPopconfirmTitle [nzTooltipMouseEnterDelay]="0.7"
      [nzPopconfirmTrigger]="historyList.length ? 'click' : null" nzPopconfirmTitle="Are you sure delete all history?"
      (nzOnConfirm)="clearAllHistory()" (nzOnCancel)="cancel()" nzOkText="Yes" nzCancelText="No"
      nzPopconfirmPlacement="topRight">
      <span class="flex items-center justify-center icon">
        <eo-iconpark-icon name="delete"> </eo-iconpark-icon>
      </span>
    </div>
  </div>
  <section class="flex-1 px-2 overflow-auto">
    <div *ngFor="let item of historyList" class="flex items-center h-8 p-2 text-xs cursor-pointer hover:bg-gray-100"
      (click)="gotoTestHistory(item)">
      <span class="block w-12 font-light method_type" [ngClass]="'method_text_' + item.request.method">{{
        item.request.method
        }}</span>
      <span class="flex-1 overflow-hidden text-gray-600 truncate">{{ item.request.uri }}</span>
    </div>
  </section>
</div>
